<template>
  <div @focusin="focusin" @focusout="focusout" class="basic-input-outer" :class="'basic-input-outer-'+size">
    <label class="basic-input-label">
      <div class="basic-input-icon-outer" :class="'basic-input-icon-outer-'+size" v-if="showIcon&&!focused">
        <span class="basic-input-icon-span">
          <SearchOutlined :class="'basic-input-icon-'+size"/>
        </span>
      </div>
      <div class="basic-input-label-input-outer">
        <form action="javascript:void 0" style="display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;align-items: stretch;justify-content: center;width: 100%">
          <input :type="type"  :style="inputStyle"  :placeholder="placeholder" class="basic-input-label-input" :class="['basic-input-label-input-'+size,...inputClasses]" :value="modelValue" @input="input($event)">
          <input type="text" style="display:none;"/>
        </form>
        </div>
    </label>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, ref} from 'vue'
import {SearchOutlined} from "@ant-design/icons-vue";

export default defineComponent({
  name:'basic-input',
  components:{
    SearchOutlined
  },
  props: {
    'modelValue':{},
    'showIcon':{},
    'size':{
      type:  String,
      default: 'normal',
      validator(val) {
        if (val == null) return true;
        if (typeof val == "string") {
          return (['normal', 'small','big'].indexOf(val)>=0)
        } else return false;
      }
    },
    'placeholder': {
      type: String,
      default: ''
    },
    'type': {
      type: String,
      default: 'text'
    },
    'center':{
      default: 'false'
    },
    'inputStyle':{
      default:''
    },
    'disabled':{
      default:false
    }
  },
  setup(props:any,context) {

    const focusin=()=>{
      focused.value=true;
    }

    const focusout=()=>{
      focused.value=false;
    }




    const focused=ref(false);
    const showIcon=computed(()=>{
      if(props.showIcon==null)return false;
      if(typeof props.showIcon=="string")return props.showIcon=='true'
      else return props.showIcon
    })

    const placeholder=computed(()=>props.placeholder)
    const size=computed(()=>props.size)
    const center=computed(()=>props.center)
    const inputStyle=computed(()=>props.inputStyle)

    const event=ref<any>(null);

    const input=($event:any)=>{

      if(props.disabled){
        if(event.value!=null){
          context.emit('update:modelValue',event.target.value)
          context.emit('input',event.target.value)
        }
      }else {
        event.value=$event;
        context.emit('update:modelValue',$event.target.value)
        context.emit('input',$event.target.value)
      }

    }

    const inputClasses=computed(()=>{
      if(center.value.toString()=='true'){
        return ['basic-input-label-input-center']
      }else {
        return ['']
      }
    })

    return {
      showIcon,
      focused,
      focusin,
      focusout,
      input,
      placeholder,
      size,
      inputClasses,
      inputStyle
    }
  }
})
</script>

<style scoped lang="less">
*{
  transition: all .32s cubic-bezier(.22, .61, .36, 1);
}
.basic-input-outer{
  box-sizing: border-box;

  border: 2px solid #bbbbbf;
  position: relative;

  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  //align-items: center;
}

.basic-input-outer-small{
  height: 28px;
  border-radius: 4px;
}
.basic-input-outer-normal{
  height: 36px;
  border-radius: 6px;
}
.basic-input-outer-big{
  height: 48px;
  border-radius: 8px;
}

.basic-input-outer:hover{
  box-shadow: 0px 0px 0px 1px #1364f1, 0 0 4px #1364f1;
  z-index: 9999;
  border-color: #4d4a4f;
}
.basic-input-icon-outer{
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  align-items: center;
}
.basic-input-icon-outer-small{
  margin-left: 4px;
}
.basic-input-icon-outer-normal{
  margin-left: 6px;
}
.basic-input-icon-outer-big{
  margin-left: 8px;
}
.basic-input-icon-small{
  font-size: 13px;
}
.basic-input-icon-normal{
  font-size: 16px;
}
.basic-input-icon-big{
  font-size: 20px;
}

.basic-input-icon-span{
  vertical-align: top;
  line-height: 0;
  font-size: 0;
}
.basic-input-label{
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  flex-grow:1;
  box-sizing: border-box;
}
.basic-input-label-input-outer{
  padding: 5px;
  flex-grow:1;

  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: row;
  justify-content:space-between;

  cursor: auto;
  -webkit-user-select: text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}
.basic-input-label-input{
  border: none;
  padding: 0;
  outline: none;
  width: 100%;
  flex-grow:1;
  line-height:normal;
  vertical-align: middle;

}
.basic-input-label-input-center{
  text-align: center;
}
.basic-input-label-input-small{
  font-size: 13px;
}
.basic-input-label-input-normal{
  font-size: 16px;
}
.basic-input-label-input-big{
  font-size: 20px;
  ::-webkit-input-placeholder{
    font-size: 16px;
  }
}
.basic-input-label-input-big::-webkit-input-placeholder{
  font-size: 18px;
}
.basic-input-label-input:focus{
  border: none;
}




</style>
